<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>约会列表 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #93c5fd;
            --primary-dark: #1d4ed8;
            --secondary: #f97316;
            --success: #10b981;
            --danger: #ef4444;
            --light-bg: #f8fafc;
            --card-bg: #ffffff;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border-color: #e2e8f0;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            --transition: all 0.2s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-bg);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 65px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 搜索框 */
        .search-box {
            padding: 12px 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 24px;
            border: 1px solid var(--border-color);
            background-color: var(--light-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 14px center;
            font-size: 0.9rem;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        /* 筛选区域 */
        .filter-container {
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .filter-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
        }
        
        .filter-tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-secondary);
            position: relative;
            cursor: pointer;
        }
        
        .filter-tab.active {
            color: var(--primary);
        }
        
        .filter-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--primary);
        }
        
        .filter-content {
            padding: 12px 16px;
            display: none;
        }
        
        .filter-content.active {
            display: block;
        }
        
        /* 分类筛选 */
        .category-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .category-item {
            padding: 6px 14px;
            background-color: var(--light-bg);
            border-radius: 16px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .category-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 时间筛选 */
        .time-filter {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .time-range {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .time-range input {
            flex: 1;
        }
        
        .time-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .time-option {
            padding: 6px 14px;
            background-color: var(--light-bg);
            border-radius: 16px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .time-option.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 距离筛选 */
        .distance-filter {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .distance-slider {
            width: 100%;
        }
        
        .distance-value {
            text-align: center;
            font-weight: 600;
            color: var(--primary);
        }
        
        .distance-options {
            display: flex;
            justify-content: space-between;
        }
        
        /* 高级筛选 */
        .advanced-filter {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .filter-group {
            margin-bottom: 12px;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
        }
        
        /* 筛选操作栏 */
        .filter-actions {
            display: flex;
            padding: 12px 16px;
            background-color: var(--light-bg);
            border-top: 1px solid var(--border-color);
            gap: 10px;
        }
        
        .filter-btn {
            flex: 1;
            padding: 8px 0;
            border-radius: 8px;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .reset-btn {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }
        
        .apply-btn {
            background-color: var(--primary);
            border: none;
            color: white;
        }
        
        /* 视图切换 */
        .view-toggle {
            display: flex;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .view-btn {
            flex: 1;
            padding: 12px;
            border: none;
            background: none;
            font-size: 0.9rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            position: relative;
        }
        
        .view-btn.active {
            color: var(--primary);
        }
        
        .view-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--primary);
        }
        
        /* 列表容器 */
        .date-list {
            padding: 12px;
            display: none;
        }
        
        .date-list.active {
            display: block;
        }
        
        /* 筛选标签 */
        .filter-tags {
            padding: 8px 12px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        
        .filter-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary);
            border-radius: 16px;
            font-size: 0.8rem;
        }
        
        .filter-tag-remove {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgba(59, 130, 246, 0.2);
            color: var(--primary);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            cursor: pointer;
        }
        
        .clear-all {
            color: var(--text-secondary);
            font-size: 0.8rem;
            background: none;
            border: none;
            margin-left: auto;
            cursor: pointer;
        }
        
        /* 1. 卡片式列表 */
        .card-list .date-item {
            background-color: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .card-list .date-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
        }
        
        .card-list .date-images {
            position: relative;
            height: 180px;
        }
        
        .card-list .no-image {
            height: 180px;
            background-color: var(--light-bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
            text-align: center;
            padding: 20px;
        }
        
        .card-list .no-image i {
            font-size: 2.5rem;
            margin-bottom: 8px;
        }
        
        .card-list .image-slider {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .card-list .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .card-list .slide.active {
            opacity: 1;
        }
        
        .card-list .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-list .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
        }
        
        .card-list .date-info {
            padding: 16px;
        }
        
        .card-list .date-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .card-list .date-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 12px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .card-list .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .card-list .date-description {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.4;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .card-list .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .card-list .tag {
            padding: 3px 10px;
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary);
            border-radius: 12px;
            font-size: 0.75rem;
        }
        
        .card-list .host-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }
        
        .card-list .host-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .card-list .host-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        /* 2. 简约列表 */
        .simple-list .date-item {
            background-color: var(--card-bg);
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            display: flex;
            overflow: hidden;
            transition: var(--transition);
        }
        
        .simple-list .date-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
        }
        
        .simple-list .date-image-container {
            width: 100px;
            flex-shrink: 0;
            position: relative;
        }
        
        .simple-list .date-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .simple-list .no-image {
            width: 100%;
            height: 100%;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
        }
        
        .simple-list .image-count {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 0.7rem;
        }
        
        .simple-list .date-details {
            flex: 1;
            padding: 12px;
            min-width: 0;
        }
        
        .simple-list .date-title {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .simple-list .date-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .simple-list .tag {
            display: inline-block;
            padding: 2px 6px;
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary);
            border-radius: 8px;
            font-size: 0.7rem;
            margin-right: 4px;
        }
        
        /* 3. 网格列表 */
        .grid-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .grid-list .date-item {
            background-color: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .grid-list .date-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
        }
        
        .grid-list .date-image-container {
            position: relative;
            padding-top: 100%;
        }
        
        .grid-list .date-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .grid-list .no-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--light-bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
            text-align: center;
            padding: 10px;
        }
        
        .grid-list .no-image i {
            font-size: 1.5rem;
            margin-bottom: 4px;
        }
        
        .grid-list .image-count {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 0.7rem;
        }
        
        .grid-list .date-info {
            padding: 10px;
        }
        
        .grid-list .date-title {
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .grid-list .date-meta {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        
        .grid-list .tag {
            display: inline-block;
            padding: 2px 6px;
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary);
            border-radius: 8px;
            font-size: 0.7rem;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin: 16px 0;
            transition: var(--transition);
        }
        
        .load-more:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 空状态 */
        .empty-state {
            padding: 80px 20px;
            text-align: center;
            color: var(--text-secondary);
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 16px;
            color: var(--border-color);
        }
        
        /* 图片预览模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .modal.show {
            display: flex;
        }
        
        .modal-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .modal-prev {
            left: 16px;
        }
        
        .modal-next {
            right: 16px;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.9rem;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">发现约会</div>
        <button class="nav-btn" id="createBtn">
            <i class="fas fa-plus"></i>
        </button>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-box">
        <input type="text" class="search-input" placeholder="搜索约会、活动或标签...">
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-container">
        <div class="filter-tabs">
            <div class="filter-tab active" data-filter="category">分类</div>
            <div class="filter-tab" data-filter="time">时间</div>
            <div class="filter-tab" data-filter="distance">距离</div>
            <div class="filter-tab" data-filter="advanced">更多</div>
        </div>
        
        <!-- 分类筛选内容 -->
        <div class="filter-content active" id="category-filter">
            <div class="category-filter">
                <div class="category-item active" data-category="all">全部</div>
                <div class="category-item" data-category="food">美食聚餐</div>
                <div class="category-item" data-category="movie">电影观影</div>
                <div class="category-item" data-category="sports">运动健身</div>
                <div class="category-item" data-category="culture">文化艺术</div>
                <div class="category-item" data-category="outdoor">户外活动</div>
                <div class="category-item" data-category="online">线上活动</div>
                <div class="category-item" data-category="music">音乐演出</div>
                <div class="category-item" data-category="travel">短途旅行</div>
                <div class="category-item" data-category="study">学习交流</div>
            </div>
        </div>
        
        <!-- 时间筛选内容 -->
        <div class="filter-content" id="time-filter">
            <div class="time-filter">
                <div class="time-options">
                    <div class="time-option active" data-time="any">不限时间</div>
                    <div class="time-option" data-time="today">今天</div>
                    <div class="time-option" data-time="tomorrow">明天</div>
                    <div class="time-option" data-time="weekend">本周末</div>
                    <div class="time-option" data-time="week">本周内</div>
                </div>
                
                <div class="time-range">
                    <input type="date" class="form-control form-control-sm" id="start-date">
                    <span>至</span>
                    <input type="date" class="form-control form-control-sm" id="end-date">
                </div>
            </div>
        </div>
        
        <!-- 距离筛选内容 -->
        <div class="filter-content" id="distance-filter">
            <div class="distance-filter">
                <div class="filter-label">距离范围</div>
                <input type="range" min="1" max="50" value="10" class="distance-slider form-range" id="distance-slider">
                <div class="distance-value" id="distance-value">10公里以内</div>
                
                <div class="distance-options">
                    <div class="time-option" data-distance="1">1公里</div>
                    <div class="time-option" data-distance="3">3公里</div>
                    <div class="time-option active" data-distance="10">10公里</div>
                    <div class="time-option" data-distance="20">20公里</div>
                    <div class="time-option" data-distance="50">50公里</div>
                </div>
            </div>
        </div>
        
        <!-- 高级筛选内容 -->
        <div class="filter-content" id="advanced-filter">
            <div class="advanced-filter">
                <div class="filter-group">
                    <div class="filter-label">参与人数</div>
                    <div class="checkbox-group">
                        <label class="checkbox-item">
                            <input type="checkbox" checked> 不限
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 2-5人
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 6-10人
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 10人以上
                        </label>
                    </div>
                </div>
                
                <div class="filter-group">
                    <div class="filter-label">活动费用</div>
                    <div class="checkbox-group">
                        <label class="checkbox-item">
                            <input type="checkbox" checked> 不限
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 免费
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 100元以下
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 100-300元
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 300元以上
                        </label>
                    </div>
                </div>
                
                <div class="filter-group">
                    <div class="filter-label">人群类型</div>
                    <div class="checkbox-group">
                        <label class="checkbox-item">
                            <input type="checkbox" checked> 不限
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 单身
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 情侣
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 朋友
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox"> 家庭
                        </label>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 筛选操作按钮 -->
        <div class="filter-actions">
            <button class="filter-btn reset-btn" id="resetFilter">重置</button>
            <button class="filter-btn apply-btn" id="applyFilter">应用筛选</button>
        </div>
    </div>
    
    <!-- 筛选标签展示区 -->
    <div class="filter-tags" id="filterTags">
        <!-- 筛选标签会通过JS动态添加 -->
        <button class="clear-all" id="clearAllFilters" style="display: none;">清除全部</button>
    </div>
    
    <!-- 视图切换 -->
    <div class="view-toggle">
        <button class="view-btn active" data-view="card-list">
            <i class="fas fa-th-large"></i>
            <span>卡片</span>
        </button>
        <button class="view-btn" data-view="simple-list">
            <i class="fas fa-list"></i>
            <span>列表</span>
        </button>
        <button class="view-btn" data-view="grid-list">
            <i class="fas fa-th"></i>
            <span>网格</span>
        </button>
    </div>
    
    <!-- 1. 卡片式列表 -->
    <div class="date-list active" id="card-list">
        <!-- 多图约会 -->
        <div class="date-item" data-category="food" data-time="weekend" data-distance="3" data-price="100-300" data-people="6-10">
            <div class="date-images">
                <div class="image-slider">
                    <div class="slide active">
                        <img src="https://picsum.photos/id/292/800/600" alt="美食约会">
                    </div>
                    <div class="slide">
                        <img src="https://picsum.photos/id/431/800/600" alt="餐厅环境">
                    </div>
                    <div class="slide">
                        <img src="https://picsum.photos/id/365/800/600" alt="特色菜品">
                    </div>
                </div>
                <div class="image-count">1/3</div>
            </div>
            
            <div class="date-info">
                <h3 class="date-title">周末日式料理品鉴会</h3>
                
                <div class="date-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周六 18:30</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>朝阳区 (2.5km)</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>4/8人</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-wallet"></i>
                        <span>¥268/人</span>
                    </div>
                </div>
                
                <p class="date-description">
                    一起探索新开的日式料理店，品尝正宗寿司和刺身，店内环境优雅，适合拍照打卡。
                </p>
                
                <div class="tags">
                    <span class="tag">美食聚餐</span>
                    <span class="tag">日式料理</span>
                    <span class="tag">新朋友</span>
                </div>
                
                <div class="host-info">
                    <img src="https://picsum.photos/id/64/100/100" alt="发起人头像" class="host-avatar">
                    <span class="host-name">美食探险家</span>
                </div>
            </div>
        </div>
        
        <!-- 单图约会 -->
        <div class="date-item" data-category="movie" data-time="weekend" data-distance="5" data-price="100以下" data-people="2-5">
            <div class="date-images">
                <div class="image-slider">
                    <div class="slide active">
                        <img src="https://picsum.photos/id/96/800/600" alt="电影海报">
                    </div>
                </div>
                <div class="image-count">1/1</div>
            </div>
            
            <div class="date-info">
                <h3 class="date-title">新片《星际探索》观影会</h3>
                
                <div class="date-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周日 15:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>海淀区 (4.8km)</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>2/10人</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-wallet"></i>
                        <span>¥68/人</span>
                    </div>
                </div>
                
                <p class="date-description">
                    一起观看最新科幻大片，结束后可以在商场咖啡厅讨论剧情，认识同样喜欢科幻的朋友。
                </p>
                
                <div class="tags">
                    <span class="tag">电影观影</span>
                    <span class="tag">科幻</span>
                    <span class="tag">轻松</span>
                </div>
                
                <div class="host-info">
                    <img src="https://picsum.photos/id/91/100/100" alt="发起人头像" class="host-avatar">
                    <span class="host-name">科幻迷</span>
                </div>
            </div>
        </div>
        
        <!-- 无图约会 -->
        <div class="date-item" data-category="sports" data-time="weekend" data-distance="1" data-price="免费" data-people="10以上">
            <div class="no-image">
                <i class="fas fa-basketball-ball"></i>
                <div>周末篮球友谊赛</div>
            </div>
            
            <div class="date-info">
                <h3 class="date-title">周末篮球友谊赛</h3>
                
                <div class="date-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周六 09:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>东城区 (0.8km)</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>6/12人</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-wallet"></i>
                        <span>免费</span>
                    </div>
                </div>
                
                <p class="date-description">
                    组织一场篮球友谊赛，水平不限，以球会友，打完球可以一起聚餐聊天，新手也欢迎参加。
                </p>
                
                <div class="tags">
                    <span class="tag">运动健身</span>
                    <span class="tag">篮球</span>
                    <span class="tag">团队</span>
                </div>
                
                <div class="host-info">
                    <img src="https://picsum.photos/id/65/100/100" alt="发起人头像" class="host-avatar">
                    <span class="host-name">篮球达人</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 2. 简约列表 -->
    <div class="date-list" id="simple-list">
        <!-- 约会项目与卡片式列表内容对应，结构简化 -->
        <div class="date-item" data-category="food" data-time="weekend" data-distance="3" data-price="100-300" data-people="6-10">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/292/300/300" alt="美食约会" class="date-image">
                <div class="image-count">3图</div>
            </div>
            <div class="date-details">
                <h3 class="date-title">周末日式料理品鉴会</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周六 18:30 · 
                    <i class="fas fa-map-marker-alt"></i> 朝阳区 (2.5km) ·
                    <i class="fas fa-wallet"></i> ¥268/人
                </div>
                <div>
                    <span class="tag">美食聚餐</span>
                    <span class="tag">日式料理</span>
                </div>
            </div>
        </div>
        
        <div class="date-item" data-category="movie" data-time="weekend" data-distance="5" data-price="100以下" data-people="2-5">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/96/300/300" alt="电影海报" class="date-image">
                <div class="image-count">1图</div>
            </div>
            <div class="date-details">
                <h3 class="date-title">新片《星际探索》观影会</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周日 15:00 · 
                    <i class="fas fa-map-marker-alt"></i> 海淀区 (4.8km) ·
                    <i class="fas fa-wallet"></i> ¥68/人
                </div>
                <div>
                    <span class="tag">电影观影</span>
                    <span class="tag">科幻</span>
                </div>
            </div>
        </div>
        
        <div class="date-item" data-category="sports" data-time="weekend" data-distance="1" data-price="免费" data-people="10以上">
            <div class="date-image-container">
                <div class="no-image">
                    <i class="fas fa-basketball-ball"></i>
                </div>
            </div>
            <div class="date-details">
                <h3 class="date-title">周末篮球友谊赛</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周六 09:00 · 
                    <i class="fas fa-map-marker-alt"></i> 东城区 (0.8km) ·
                    <i class="fas fa-wallet"></i> 免费
                </div>
                <div>
                    <span class="tag">运动健身</span>
                    <span class="tag">篮球</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 3. 网格列表 -->
    <div class="date-list" id="grid-list">
        <!-- 约会项目与卡片式列表内容对应，结构简化 -->
        <div class="date-item" data-category="food" data-time="weekend" data-distance="3" data-price="100-300" data-people="6-10">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/292/300/300" alt="美食约会" class="date-image">
                <div class="image-count">3图</div>
            </div>
            <div class="date-info">
                <h3 class="date-title">周末日式料理品鉴会</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周六 18:30
                </div>
                <span class="tag">美食聚餐</span>
            </div>
        </div>
        
        <div class="date-item" data-category="movie" data-time="weekend" data-distance="5" data-price="100以下" data-people="2-5">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/96/300/300" alt="电影海报" class="date-image">
                <div class="image-count">1图</div>
            </div>
            <div class="date-info">
                <h3 class="date-title">新片《星际探索》观影会</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周日 15:00
                </div>
                <span class="tag">电影观影</span>
            </div>
        </div>
        
        <div class="date-item" data-category="sports" data-time="weekend" data-distance="1" data-price="免费" data-people="10以上">
            <div class="date-image-container">
                <div class="no-image">
                    <i class="fas fa-basketball-ball"></i>
                    <div>篮球</div>
                </div>
            </div>
            <div class="date-info">
                <h3 class="date-title">周末篮球友谊赛</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周六 09:00
                </div>
                <span class="tag">运动健身</span>
            </div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <button class="load-more" id="loadMoreBtn">加载更多约会</button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-calendar-alt"></i>
            <span>约会</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 图片预览模态框 -->
    <div class="modal" id="imageModal">
        <div class="modal-content">
            <button class="modal-close" id="modalCloseBtn">&times;</button>
            <button class="modal-nav modal-prev" id="prevImageBtn">
                <i class="fas fa-chevron-left"></i>
            </button>
            <img src="" alt="图片预览" class="modal-image" id="modalImage">
            <button class="modal-nav modal-next" id="nextImageBtn">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toastMessage"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 筛选条件存储
        const filters = {
            category: 'all',
            time: 'any',
            distance: 10,
            price: [],
            people: []
        };
        
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const createBtn = document.getElementById('createBtn');
        const viewBtns = document.querySelectorAll('.view-btn');
        const dateLists = document.querySelectorAll('.date-list');
        const filterTabs = document.querySelectorAll('.filter-tab');
        const filterContents = document.querySelectorAll('.filter-content');
        const categoryItems = document.querySelectorAll('.category-item');
        const timeOptions = document.querySelectorAll('.time-option');
        const distanceSlider = document.getElementById('distance-slider');
        const distanceValue = document.getElementById('distance-value');
        const distanceOptions = document.querySelectorAll('[data-distance]');
        const resetFilterBtn = document.getElementById('resetFilter');
        const applyFilterBtn = document.getElementById('applyFilter');
        const filterTagsContainer = document.getElementById('filterTags');
        const clearAllFiltersBtn = document.getElementById('clearAllFilters');
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const searchInput = document.querySelector('.search-input');
        const imageModal = document.getElementById('imageModal');
        const modalImage = document.getElementById('modalImage');
        const modalCloseBtn = document.getElementById('modalCloseBtn');
        const prevImageBtn = document.getElementById('prevImageBtn');
        const nextImageBtn = document.getElementById('nextImageBtn');
        const toastMessage = document.getElementById('toastMessage');
        
        // 图片数据
        const dateImages = {
            food: [
                'https://picsum.photos/id/292/800/600',
                'https://picsum.photos/id/431/800/600',
                'https://picsum.photos/id/365/800/600'
            ],
            movie: [
                'https://picsum.photos/id/96/800/600'
            ]
        };
        
        let currentImageSet = [];
        let currentImageIndex = 0;
        
        // 初始化
        function init() {
            setupEventListeners();
            initImageSliders();
            setDefaultDate();
        }
        
        // 设置默认日期（今天和明天）
        function setDefaultDate() {
            const today = new Date();
            const tomorrow = new Date(today);
            tomorrow.setDate(tomorrow.getDate() + 1);
            
            document.getElementById('start-date').valueAsDate = today;
            document.getElementById('end-date').valueAsDate = tomorrow;
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 创建约会按钮
            createBtn.addEventListener('click', () => {
                showToast('创建新约会');
            });
            
            // 视图切换
            viewBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const viewType = btn.getAttribute('data-view');
                    
                    viewBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    
                    dateLists.forEach(list => {
                        list.classList.remove('active');
                    });
                    document.getElementById(viewType).classList.add('active');
                });
            });
            
            // 筛选标签页切换
            filterTabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const filterType = tab.getAttribute('data-filter');
                    
                    filterTabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    filterContents.forEach(content => {
                        content.classList.remove('active');
                    });
                    document.getElementById(`${filterType}-filter`).classList.add('active');
                });
            });
            
            // 分类筛选
            categoryItems.forEach(item => {
                item.addEventListener('click', () => {
                    const category = item.getAttribute('data-category');
                    
                    categoryItems.forEach(i => i.classList.remove('active'));
                    item.classList.add('active');
                    
                    filters.category = category;
                });
            });
            
            // 时间筛选
            timeOptions.forEach(option => {
                if (option.getAttribute('data-time')) {
                    option.addEventListener('click', () => {
                        const time = option.getAttribute('data-time');
                        
                        // 只清除同组的active状态
                        document.querySelectorAll('[data-time]').forEach(opt => {
                            opt.classList.remove('active');
                        });
                        option.classList.add('active');
                        
                        filters.time = time;
                    });
                }
            });
            
            // 距离滑块
            distanceSlider.addEventListener('input', () => {
                const distance = parseInt(distanceSlider.value);
                distanceValue.textContent = `${distance}公里以内`;
                
                // 更新距离选项按钮状态
                distanceOptions.forEach(option => {
                    option.classList.remove('active');
                    if (parseInt(option.getAttribute('data-distance')) === distance) {
                        option.classList.add('active');
                    }
                });
                
                filters.distance = distance;
            });
            
            // 距离快捷选项
            distanceOptions.forEach(option => {
                option.addEventListener('click', () => {
                    const distance = parseInt(option.getAttribute('data-distance'));
                    
                    distanceOptions.forEach(opt => opt.classList.remove('active'));
                    option.classList.add('active');
                    
                    distanceSlider.value = distance;
                    distanceValue.textContent = `${distance}公里以内`;
                    
                    filters.distance = distance;
                });
            });
            
            // 复选框筛选（费用和人数）
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const parentLabel = this.closest('.checkbox-item').textContent.trim();
                    const filterGroup = this.closest('.filter-group').querySelector('.filter-label').textContent;
                    
                    // 处理"不限"选项的特殊逻辑
                    if (parentLabel === '不限') {
                        if (this.checked) {
                            // 如果勾选"不限"，取消同组其他选项
                            const siblings = this.closest('.checkbox-group').querySelectorAll('input[type="checkbox"]');
                            siblings.forEach(sib => {
                                if (sib !== this) sib.checked = false;
                            });
                            
                            // 清空对应筛选条件
                            if (filterGroup === '活动费用') {
                                filters.price = [];
                            } else if (filterGroup === '参与人数') {
                                filters.people = [];
                            }
                        }
                    } else {
                        // 如果勾选其他选项，取消"不限"
                        const allCheckbox = this.closest('.checkbox-group').querySelector('input[type="checkbox"]');
                        if (allCheckbox && allCheckbox.closest('.checkbox-item').textContent.trim() === '不限') {
                            allCheckbox.checked = false;
                        }
                        
                        // 更新筛选条件
                        if (filterGroup === '活动费用') {
                            if (this.checked) {
                                filters.price.push(parentLabel);
                            } else {
                                filters.price = filters.price.filter(item => item !== parentLabel);
                            }
                        } else if (filterGroup === '参与人数') {
                            if (this.checked) {
                                filters.people.push(parentLabel);
                            } else {
                                filters.people = filters.people.filter(item => item !== parentLabel);
                            }
                        }
                    }
                });
            });
            
            // 重置筛选
            resetFilterBtn.addEventListener('click', resetFilters);
            
            // 应用筛选
            applyFilterBtn.addEventListener('click', applyFilters);
            
            // 清除所有筛选
            clearAllFiltersBtn.addEventListener('click', () => {
                resetFilters();
                applyFilters();
            });
            
            // 加载更多
            loadMoreBtn.addEventListener('click', () => {
                loadMoreBtn.textContent = '加载中...';
                setTimeout(() => {
                    loadMoreBtn.textContent = '没有更多约会了';
                    loadMoreBtn.disabled = true;
                    loadMoreBtn.style.opacity = '0.7';
                }, 1500);
            });
            
            // 搜索功能
            searchInput.addEventListener('input', debounce(function() {
                const searchTerm = this.value.trim().toLowerCase();
                searchDates(searchTerm);
            }, 300));
            
            // 图片查看
            document.querySelectorAll('.date-images, .date-image-container img').forEach(el => {
                el.addEventListener('click', openImageViewer);
            });
            
            // 图片模态框控制
            modalCloseBtn.addEventListener('click', closeImageViewer);
            prevImageBtn.addEventListener('click', showPrevImage);
            nextImageBtn.addEventListener('click', showNextImage);
            
            // 点击模态框背景关闭
            imageModal.addEventListener('click', (e) => {
                if (e.target === imageModal) {
                    closeImageViewer();
                }
            });
            
            // 约会项目点击
            document.querySelectorAll('.date-item').forEach(item => {
                item.addEventListener('click', (e) => {
                    if (!e.target.closest('.date-images, .date-image-container, .slide, img')) {
                        const title = item.querySelector('.date-title').textContent;
                        showToast(`查看「${title}」详情`);
                    }
                });
            });
        }
        
        // 重置筛选条件
        function resetFilters() {
            // 重置分类筛选
            categoryItems.forEach(item => {
                item.classList.remove('active');
                if (item.getAttribute('data-category') === 'all') {
                    item.classList.add('active');
                }
            });
            
            // 重置时间筛选
            document.querySelectorAll('[data-time]').forEach(option => {
                option.classList.remove('active');
                if (option.getAttribute('data-time') === 'any') {
                    option.classList.add('active');
                }
            });
            
            // 重置距离筛选
            distanceSlider.value = 10;
            distanceValue.textContent = '10公里以内';
            distanceOptions.forEach(option => {
                option.classList.remove('active');
                if (parseInt(option.getAttribute('data-distance')) === 10) {
                    option.classList.add('active');
                }
            });
            
            // 重置复选框
            checkboxes.forEach(checkbox => {
                const parentLabel = checkbox.closest('.checkbox-item').textContent.trim();
                checkbox.checked = parentLabel === '不限';
            });
            
            // 重置筛选对象
            filters.category = 'all';
            filters.time = 'any';
            filters.distance = 10;
            filters.price = [];
            filters.people = [];
            
            // 清除筛选标签
            clearFilterTags();
        }
        
        // 应用筛选条件
        function applyFilters() {
            // 收集所有筛选条件并生成标签
            generateFilterTags();
            
            // 执行筛选
            filterDates();
            
            showToast('筛选已应用');
        }
        
        // 生成筛选标签
        function generateFilterTags() {
            // 先清空现有标签
            clearFilterTags();
            
            // 分类标签
            if (filters.category !== 'all') {
                const categoryText = document.querySelector(`.category-item[data-category="${filters.category}"]`).textContent;
                addFilterTag('category', categoryText);
            }
            
            // 时间标签
            if (filters.time !== 'any') {
                const timeText = document.querySelector(`.time-option[data-time="${filters.time}"]`).textContent;
                addFilterTag('time', timeText);
            }
            
            // 距离标签
            if (filters.distance !== 10) { // 默认值不显示
                addFilterTag('distance', `${filters.distance}公里以内`);
            }
            
            // 价格标签
            filters.price.forEach(price => {
                addFilterTag('price', price);
            });
            
            // 人数标签
            filters.people.forEach(people => {
                addFilterTag('people', people);
            });
            
            // 显示/隐藏"清除全部"按钮
            const hasFilters = filterTagsContainer.querySelectorAll('.filter-tag').length > 0;
            clearAllFiltersBtn.style.display = hasFilters ? 'block' : 'none';
        }
        
        // 添加筛选标签
        function addFilterTag(type, text) {
            const tag = document.createElement('div');
            tag.className = 'filter-tag';
            tag.setAttribute('data-type', type);
            tag.innerHTML = `
                <span>${text}</span>
                <button class="filter-tag-remove">&times;</button>
            `;
            
            // 标签删除按钮事件
            tag.querySelector('.filter-tag-remove').addEventListener('click', function() {
                tag.remove();
                
                // 根据标签类型重置对应的筛选条件
                if (type === 'category') {
                    filters.category = 'all';
                    categoryItems.forEach(item => {
                        item.classList.remove('active');
                        if (item.getAttribute('data-category') === 'all') {
                            item.classList.add('active');
                        }
                    });
                } else if (type === 'time') {
                    filters.time = 'any';
                    document.querySelectorAll('[data-time]').forEach(option => {
                        option.classList.remove('active');
                        if (option.getAttribute('data-time') === 'any') {
                            option.classList.add('active');
                        }
                    });
                } else if (type === 'distance') {
                    filters.distance = 10;
                    distanceSlider.value = 10;
                    distanceValue.textContent = '10公里以内';
                    distanceOptions.forEach(option => {
                        option.classList.remove('active');
                        if (parseInt(option.getAttribute('data-distance')) === 10) {
                            option.classList.add('active');
                        }
                    });
                } else if (type === 'price') {
                    filters.price = filters.price.filter(item => item !== text);
                    // 重新勾选"不限"
                    if (filters.price.length === 0) {
                        document.querySelectorAll('.filter-group').forEach(group => {
                            if (group.querySelector('.filter-label').textContent === '活动费用') {
                                group.querySelector('input[type="checkbox"]').checked = true;
                            }
                        });
                    }
                } else if (type === 'people') {
                    filters.people = filters.people.filter(item => item !== text);
                    // 重新勾选"不限"
                    if (filters.people.length === 0) {
                        document.querySelectorAll('.filter-group').forEach(group => {
                            if (group.querySelector('.filter-label').textContent === '参与人数') {
                                group.querySelector('input[type="checkbox"]').checked = true;
                            }
                        });
                    }
                }
                
                // 重新应用筛选
                filterDates();
                
                // 检查是否还有标签
                const hasFilters = filterTagsContainer.querySelectorAll('.filter-tag').length > 0;
                clearAllFiltersBtn.style.display = hasFilters ? 'block' : 'none';
            });
            
            filterTagsContainer.insertBefore(tag, clearAllFiltersBtn);
        }
        
        // 清除所有筛选标签
        function clearFilterTags() {
            const tags = filterTagsContainer.querySelectorAll('.filter-tag');
            tags.forEach(tag => tag.remove());
        }
        
        // 筛选约会
        function filterDates() {
            document.querySelectorAll('.date-item').forEach(item => {
                let isMatch = true;
                
                // 分类筛选
                if (filters.category !== 'all' && item.getAttribute('data-category') !== filters.category) {
                    isMatch = false;
                }
                
                // 时间筛选
                if (filters.time !== 'any' && item.getAttribute('data-time') !== filters.time) {
                    isMatch = false;
                }
                
                // 距离筛选
                const itemDistance = parseFloat(item.getAttribute('data-distance'));
                if (itemDistance > filters.distance) {
                    isMatch = false;
                }
                
                // 价格筛选
                if (filters.price.length > 0 && !filters.price.includes(item.getAttribute('data-price'))) {
                    isMatch = false;
                }
                
                // 人数筛选
                if (filters.people.length > 0 && !filters.people.includes(item.getAttribute('data-people'))) {
                    isMatch = false;
                }
                
                // 应用筛选结果
                item.style.display = isMatch ? '' : 'none';
            });
            
            // 检查空状态
            checkEmptyState();
        }
        
        // 搜索约会
        function searchDates(term) {
            if (!term) {
                // 搜索词为空时，保持当前筛选状态
                filterDates();
                return;
            }
            
            document.querySelectorAll('.date-item').forEach(item => {
                // 先检查是否符合当前筛选条件
                let passesFilters = true;
                if (filters.category !== 'all' && item.getAttribute('data-category') !== filters.category) {
                    passesFilters = false;
                }
                
                if (passesFilters) {
                    const title = item.querySelector('.date-title').textContent.toLowerCase();
                    const tags = Array.from(item.querySelectorAll('.tag')).map(tag => tag.textContent.toLowerCase());
                    
                    const matchesSearch = title.includes(term) || tags.some(tag => tag.includes(term));
                    item.style.display = matchesSearch ? '' : 'none';
                } else {
                    item.style.display = 'none';
                }
            });
            
            checkEmptyState();
        }
        
        // 检查空状态
        function checkEmptyState() {
            const activeList = document.querySelector('.date-list.active');
            const visibleItems = activeList.querySelectorAll('.date-item:not([style*="display: none"])');
            let emptyState = activeList.querySelector('.empty-state');
            
            if (visibleItems.length === 0) {
                if (!emptyState) {
                    emptyState = document.createElement('div');
                    emptyState.className = 'empty-state';
                    emptyState.innerHTML = `
                        <i class="fas fa-calendar-times"></i>
                        <div>没有找到符合条件的约会</div>
                        <div style="margin-top: 8px; font-size: 0.85rem;">尝试调整筛选条件或搜索词</div>
                    `;
                    activeList.appendChild(emptyState);
                }
            } else if (emptyState) {
                emptyState.remove();
            }
        }
        
        // 初始化图片轮播
        function initImageSliders() {
            document.querySelectorAll('.image-slider').forEach(slider => {
                let currentSlide = 0;
                const slides = slider.querySelectorAll('.slide');
                const slideCount = slides.length;
                const imageCountEl = slider.parentElement.querySelector('.image-count');
                
                // 自动轮播
                setInterval(() => {
                    slides[currentSlide].classList.remove('active');
                    currentSlide = (currentSlide + 1) % slideCount;
                    slides[currentSlide].classList.add('active');
                    
                    if (imageCountEl) {
                        imageCountEl.textContent = `${currentSlide + 1}/${slideCount}`;
                    }
                }, 3000);
            });
        }
        
        // 图片查看器相关函数
        function openImageViewer(e) {
            e.stopPropagation();
            
            const dateItem = this.closest('.date-item');
            const category = dateItem.getAttribute('data-category');
            
            currentImageSet = dateImages[category] || [];
            
            if (currentImageSet.length === 0) return;
            
            if (this.tagName === 'IMG') {
                const imgSrc = this.src;
                currentImageIndex = currentImageSet.findIndex(img => img.includes(imgSrc.split('/').pop().split('?')[0]));
            } else {
                currentImageIndex = 0;
            }
            
            modalImage.src = currentImageSet[currentImageIndex];
            imageModal.classList.add('show');
            document.body.style.overflow = 'hidden';
        }
        
        function closeImageViewer() {
            imageModal.classList.remove('show');
            document.body.style.overflow = 'auto';
        }
        
        function showPrevImage() {
            currentImageIndex = (currentImageIndex - 1 + currentImageSet.length) % currentImageSet.length;
            modalImage.src = currentImageSet[currentImageIndex];
        }
        
        function showNextImage() {
            currentImageIndex = (currentImageIndex + 1) % currentImageSet.length;
            modalImage.src = currentImageSet[currentImageIndex];
        }
        
        // 显示提示消息
        function showToast(message) {
            toastMessage.textContent = message;
            toastMessage.classList.add('show');
            setTimeout(() => {
                toastMessage.classList.remove('show');
            }, 2000);
        }
        
        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
